<!-- 购买记录 -->
<template>
    <el-row style="margin-bottom: 20px;height: auto;margin-left: 20px;">
        <el-col v-for="(item, index) in displayedData" :key="index" :span="16" :offset="index > 0 ? 0 : 0">
            <el-card :body-style="{ padding: '5px' }"
                style="width: 900px;margin-top: 20px;padding-left: 20px;padding-right: 20px;">
                <div style="line-height: 30px;">
                    <span style="float: left;">订单时间：{{ item.createDate }}</span>
                    <span style="float: right;">订单号：{{ item.orderNo }}</span>
                </div>
                <div style="line-height: 40px;">
                    <img :src="item.course.courseCover"
                        style="width: 150px;height: 90px; margin-top: 50px;margin-left: -225px;" />
                    <span style="margin-left: 20px; height: 50px; line-height: 50px;">{{ item.course.courseName }}</span>
                </div>
                <div>
                    <span style="color: rgb(204, 0, 0);font-size: 20px;">￥{{ item.courseCPrice }}</span>
                    <span style="float: right;">
                        状态：
                        <span v-if="item.orderState == '已支付' || item.orderState == '未支付'">{{ item.orderState }}</span>
                        <el-button v-else-if="item.orderState == '等待支付'" @click="handleClick(item.goodId)" type="primary">{{
                            item.orderState }}</el-button>
                    </span>
                </div>
            </el-card>
        </el-col>
    </el-row>


    <el-row>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
            @current-change="changePage" :total="reccourselData.length" style="margin-left: 400px;" />
    </el-row>
</template>

<script>

import { ref, reactive, onMounted, computed } from 'vue'
import axios from '../../api/index';

import { ElMessage } from "element-plus";
import { useRoute, useRouter } from 'vue-router';


export default {
    setup() {

        const route = useRoute();
        const router = useRouter();
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        const reccourselData = ref([]);
        const currentPage = ref(1); // 当前页码  
        const pageSize = ref(5); // 每页数据数量
        let number = ref('已支付');

        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);

        onMounted(async () => {
            try {
                //发起请求
                axios.get('/order/myOrder', {
                    params: {
                        userId: userInfo.id
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {
                        console.log(response.data);
                        reccourselData.value = response.data;
                        for (var i = 0; i < reccourselData.value.length; i++) {
                            var chinaTime = converttime(reccourselData.value[i].createDate);
                            reccourselData.value[i].createDate = chinaTime;
                            console.log(reccourselData.value[i].orderState);
                            // if(reccourselData.value[i].orderState === '已支付')
                        }
                    } else {
                        ElMessage.error("暂无数据~~");
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        })

        function converttime(mytime) {
            // 将字符串转换为日期对象  
            var date = new Date(mytime);

            // 获取中国时区的偏移量（以分钟为单位）  
            var chinaOffset = 8 * 60; // 中国时区为UTC+8  

            // 计算中国时间的分钟和秒  
            var localMinutes = date.getMinutes() + chinaOffset;
            var localSeconds = date.getSeconds();

            // 处理分钟和秒的进位  
            if (localMinutes >= 60) {
                date.setHours(date.getHours() + 1);
                localMinutes -= 60;
            }

            if (localSeconds >= 60) {
                localMinutes++;
                localSeconds -= 60;
            }
            // 设置计算后的分钟和秒  
            date.setMinutes(localMinutes);
            date.setSeconds(localSeconds);

            // 格式化中国时间字符串  
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要+1  
            var day = ("0" + date.getDate()).slice(-2);
            var hours = ("0" + date.getHours()).slice(-2);
            var minutes = ("0" + date.getMinutes()).slice(-2);
            var seconds = ("0" + date.getSeconds()).slice(-2);

            var chinaTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

            return chinaTime;
        }

        const displayedData = computed(() => {
            const start = (currentPage.value - 1) * pageSize.value;
            const end = start + pageSize.value;
            return reccourselData.value.slice(start, end);
        });
        function changePage(newPage) {
            currentPage.value = newPage;
        }
        function handleClick(goodId) {
            router.push("/paygood/" + goodId);
        }
        return {
            displayedData,
            changePage,
            pageSize,
            currentPage,
            handleClick,
            number,
            converttime,
            token,
            longtoken,
            reccourselData,
            route,
            router,
        }
    }
}


</script>